<template>
    <view class="relative">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar navbarType='5'></wlk-navbar>
        <wlk-poster mode="poster" :qrcode="qrcode" ref="childComponent"></wlk-poster>
        <view class="commission-content relative pd30" :style="{background:bgColor}">
            <u-gap height="40"></u-gap>
            <view class="user-info wlkflex">
                <view class="avatar-box">
                    <u-avatar :src="userInfo.avatar" size="40"></u-avatar>
                </view>
                <view class="user-nickname ml10">{{userInfo.nickname||'/'}}</view>
                <view class="level-info wlkflex  ml20">
                    <view class="icon mr10">
                        <image class="wd100 hg100" lazy-load :src="agentInfo.level_info?agentInfo.level_info.image:''"  mode="aspectFill"/>
                    </view>
                    <view>
                        {{agentInfo.level_info?agentInfo.level_info.name:''}}
                    </view>
                </view>
            </view>

            <view class="bg-wrap"></view>
            <view class="nav-head pd30 shadow relative">
                <view class="count-head wlkflex justify-between br08 pd30 overHidden">
                    <view class="wd40" @click="jump('/pages/plugins/commission/commission_log')">
                        <view class="wlkflex">
                            <view class="title">累计佣金(元)</view>
                            <uni-icons type="forward" color="#999" size="15"></uni-icons>
                        </view>
                        <view class="count-price mt15 bold">
                            {{agentInfo.wdInfo?agentInfo.wdInfo.all_money:0.00}}
                        </view>
                    </view>
                    <view class="wd40" @click="jump('/pages/plugins/commission/team')">
                        <view class="wlkflex">
                            <view class="title">下线总数</view>
                            <uni-icons type="forward" color="#999" size="15"></uni-icons>
                        </view>
                        <view class="count-price mt15 bold">
                            {{agentInfo.team_num||0}}
                        </view>
                    </view>
                    <view class="count-icon">
                        <image class="wd100" :src="images.finance"  mode="widthFix"/>
                    </view>
                </view>
                <view class="wlkflex justify-between align-start">
                    <view>
                        <view class="title">可提现(元)</view>
                        <view class="nav-price mt10 bold">{{userInfo.money||0.00}}</view>
                    </view>
                    <view @click="jump('/pages/wallet/withdraw-log')" class="wlkflex ">
                        <view class="right-title">提现明细</view>
                        <uni-icons type="forward" color="#999" size="15"></uni-icons>
                    </view>
                </view>
                <view class="wlkflex justify-between mt30">
                    <view>
                        <view class="title">已提现(元)</view>
                        <view class="lt-price mt10 bold">{{agentInfo.wdInfo?agentInfo.wdInfo.done_money:0.00}}</view>
                    </view>
                    <view>
                        <view class="title">待入账(元)</view>
                        <view class="lt-price mt10 bold">{{agentInfo.wdInfo?agentInfo.wdInfo.wait_money:0.00}}</view>
                    </view>
                    <view>
                        <view class="title">已取消(元)</view>
                        <view class="lt-price mt10 bold">{{agentInfo.wdInfo?agentInfo.wdInfo.back_money:0.00}}</view>
                    </view>
                </view>
                <view class="wlkflex justify-center nav-btn mt40">
                    <u-button @click="jump('/pages/wallet/withdraw')" :customStyle="{
			                    margin:'0',
			                    width:'95%',
			                    fontSize:'14rpx',
                                boxShadow:boxShadow
                         }" :color="linearColor" size="large" shape="circle"  text="立即提现"></u-button>
                </view>
            </view>
            <view class="head-title">常用功能</view>
            <view class="tools-card br08 shadow wlkflex justify-between wrap">
                <view class="grid-item wd40 wlkflex" @click="jump('/pages/plugins/commission/order')">
                    <image src="../static/images/commission/order.png"  mode="widthFix"/>
                    <view class="grid-info ml10">
                        <view class="info-name bold">分销订单</view>
                        <view class="info-desc mt05">{{agentInfo.orderCount||0}}笔</view>
                    </view>
                </view>
                <view class="grid-item wd40 wlkflex" @click="jump('/pages/plugins/commission/team')">
                    <image src="../static/images/commission/communication.png"  mode="widthFix"/>
                    <view class="grid-info ml10">
                        <view class="info-name bold">我的团队</view>
                        <view class="info-desc mt05">{{agentInfo.team_num||0}}人</view>
                    </view>
                </view>
                <view class="grid-item wd40 wlkflex" @click="jump('/pages/plugins/commission/rank')">
                    <image src="../static/images/commission/rank.png"  mode="widthFix"/>
                    <view class="grid-info ml10">
                        <view class="info-name bold">分销排行</view>
                        <view class="info-desc mt05">{{agentInfo.rank?'您的排名'+agentInfo.rank:'暂无排名'}}</view>
                    </view>
                </view>
                <view class="grid-item wd40 wlkflex" @click="jump('/pages/plugins/commission/line')">
                    <image src="../static/images/commission/destination.png"  mode="widthFix"/>
                    <view class="grid-info ml10">
                        <view class="info-name bold">推广产品</view>
                        <view class="info-desc mt05">等待您的分享</view>
                    </view>
                </view>
                <view class="grid-item wd40 wlkflex" @click="jump('/pages/plugins/commission/commission_log')">
                    <image src="../static/images/commission/sales.png"  mode="widthFix"/>
                    <view class="grid-info ml10">
                        <view class="info-name bold">佣金明细</view>
                        <view class="info-desc mt05">点击查看</view>
                    </view>
                </view>
                <view class="grid-item wd40 wlkflex" @click="canvas">
                    <image src="../static/images/commission/poster.png"  mode="widthFix"/>
                    <view class="grid-info ml10">
                        <view class="info-name bold">邀请海报</view>
                        <view class="info-desc mt05">点击生成</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bg-icon">
            <image class="wd100 br04":src="images.texture"  mode="widthFix"/>
        </view>
    </view>
</template>
<script>
    var _self;
    import {rgbaToRgb,toUrl} from '@/wlkutils/tools';
    import share from "@/wlkutils/share";
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin','images'])

        },
        data() {
            return {
                outModel:false,
                boxShadow:'0 2px 4px rgba(0,0,0,.06)',
                bgColor:'',
                linearColor:'',
                agentInfo:{},
                wdInfo:[],
                showCanvas:false,
                qrcode:'',
            };
        },
        onLoad() {
            _self = this;
        },
        onShow() {
            this.bgColor = 'linear-gradient(to bottom,'+this.themeColor+' ,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.01)+')';
            this.linearColor = 'linear-gradient(to right,'+this.themeColor+' ,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.75)+')';
            this.boxShadow = '0px 5px 5px '+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), .2);
            this.getInfo();
        },
        watch:{
            isLogin(val) {
                if(val){
                    _self.getInfo();
                }
            },
            themeColor(val) {
                this.bgColor = 'linear-gradient(to bottom,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.01)+')';
                this.linearColor = 'linear-gradient(to right,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.75)+')';
                this.boxShadow = '0px 5px 5px '+ uni.$u.colorToRgba(rgbaToRgb(val), .2);
            },
            images(val) {
                this.posterImg = val.poster;
            }
        },
        methods: {
            ...mapMutations(["setLoginPopupShow"]),
            getInfo(){
                uni.$u.http.post('commission/getInfo', {

                }).then(res => {
                    _self.agentInfo = res.data;
                    if (res.data.noInfo ==1){
                      if (res.data.agentWhere ==='apply'){
                        uni.showModal({
                            title: '提示',
                            content: '您还不是分销商',
                            confirmText:'去申请',
                            cancelText:'取消',
                            confirmColor:this.themeColor,
                            success: function (res) {
                            if (res.confirm) {
                              _self.$Router.replace('/pages/plugins/commission/register')
                            } else if (res.cancel) {
                              _self.$Router.pushTab('/pages/index/user')
                            }
                          }
                        });
                      }
                      if (res.data.agentWhere ==='line'){
                        uni.showModal({
                            title: '提示',
                            content: '您还不是分销商,需要购买指定产品才能成为分销商',
                            confirmText:'去购买',
                            cancelText:'取消',
                            confirmColor:this.themeColor,
                            success: function (e) {
                            if (e.confirm) {
                              _self.$Router.replace('/pages/line/list?ids='+res.data.agentWhereValue)
                            } else if (e.cancel) {
                              _self.$Router.pushTab('/pages/index/user')
                            }
                          }
                        });
                      }
                      if (res.data.agentWhere ==='buy'){
                        uni.showModal({
                            title: '提示',
                            content: `您还不是分销商,需要消费达到${res.data.agentWhereValue},才能成为分销商`,
                            confirmText:'去购买',
                            cancelText:'取消',
                            confirmColor:this.themeColor,
                            success: function (res) {
                            if (res.confirm) {
                              _self.$Router.replace('/pages/line/list')
                            } else if (res.cancel) {
                              _self.$Router.pushTab('/pages/index/user')
                            }
                          }
                        });
                      }
                      if (res.data.agentWhere ==='ticket'){
                        uni.showModal({
                          title: '提示',
                          content: '您还不是分销商,需要购买指定产品才能成为分销商',
                          confirmText:'去购买',
                          cancelText:'取消',
                          confirmColor:this.themeColor,
                          success: function (e) {
                            if (e.confirm) {
                              _self.$Router.replace('/pages/ticket/list?ids='+res.data.agentWhereValue)
                            } else if (e.cancel) {
                              _self.$Router.pushTab('/pages/index/user')
                            }
                          }
                        });
                      }

                    }
                    if (res.data.noStatus ==1){
                        uni.showModal({
                            title: '提示',
                            content: '请等待审核',
                            confirmText:'去逛逛',
                            cancelText:'取消',
                            confirmColor:this.themeColor,
                            success: function (res) {
                                if (res.confirm) {
                                    _self.$Router.replace('/pages/index/user')
                                } else if (res.cancel) {
                                    _self.$Router.pushTab('/pages/index/user')
                                }
                            }
                        });
                    }
                    if (res.data.noApplyInfo ==1){
                        uni.showModal({
                            title: '提示',
                            content: '请完善资料',
                            confirmText:'去填写',
                            cancelText:'取消',
                            confirmColor:this.themeColor,
                            success: function (res) {
                                if (res.confirm) {
                                    _self.$Router.replace('/pages/plugins/commission/register?isPerfect=1')

                                } else if (res.cancel) {
                                    _self.$Router.pushTab('/pages/index/user')
                                }
                            }
                        });
                    }
                }).catch(res => {
                })

            },
            jump(path){
                toUrl(path);
            },
            initShareInfo(){
                let data = new Object();
                data.path = 'pages/plugins/commission/index';
                return share.setShareInfo(data);
            },
            async canvas(){
                if(!this.isLogin){
                    this.setLoginPopupShow(true);
                    return false;
                }
                // 渲染
                // #ifndef MP
                let shareInfo = this.initShareInfo();
                this.qrcode = shareInfo.copyLink;
                this.$refs.childComponent.canvas();
                // #endif
                // #ifdef MP
                let res = await uni.$u.http.post('wechat/getUnlimitedQRCode',
                    {type:'commission'},{custom: {hideMsg: true}}
                ).then(res => {
                    _self.qrcode =  res.data;
                })
                // #endif
                _self.$refs.childComponent.canvas();
            },
        }
    }
</script>
<style lang="scss">
   page{
       .commission-content{
           height: 800rpx;
           /* #ifdef MP-WEIXIN */
           padding-top: 100rpx;
           /* #endif */
           .user-info{
                .avatar-box{
                    border: 2px solid white;
                    border-radius: 50%;
                }
                .user-nickname{
                    font-size: $font-lg;
                    color: white;
                }
                .level-info{
                    padding-right: 15rpx;
                    border-radius: 40rpx;
                    font-size: $font-sm;
                    color: white;
                    background-color: rgba(255, 255, 255, 0.2);
                    .icon{
                        padding: 5rpx;
                        background-color: white;
                        width: 45rpx;
                        height: 45rpx;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                }
            }
           .count-head{
               background-color: white;
               box-shadow: -1px -12px 14px -11px rgba(226,226,226,0.74) inset;
               width: 96%;
               height: 190rpx;
               border-radius: 10px 10px 0 0;
               position: absolute;
               z-index: 100;
               left: 2%;
               top: -190rpx;
               .count-icon{
                   position: absolute;
                   z-index: -1;
                   top: -30rpx;
                   right: -50rpx;
                   width: 400rpx;
                   opacity: .2;
               }
           }
           .nav-head{
               width: 100%;
               background-color: white;
               border-radius: 0 0 8px 8px;
               padding: 50rpx 30rpx 50rpx 30rpx;
          }
           .tools-card{
               background-color: #FFFFFF;
               padding: 40rpx;
               .grid-item{
                   margin-bottom: 50rpx;
                   image{
                       width: 80rpx;
                       height: 80rpx;
                   }
                   .grid-info{
                       .info-name{
                           font-size: $font-base;
                       }
                       .info-desc{
                           font-size: $font-sm;
                           color: $uni-text-color-grey;
                       }
                   }
               }
           }
           .right-title{
               font-size: $font-base;
               color: $uni-text-color-grey;
           }
           .title{
               font-size: $font-base;
               color: #666;
           }
           .count-price{
               font-size: $font-macro;
           }
           .nav-price{
               font-size: $font-max;
               color: $-tour-price-color;
           }
           .lt-price{
               font-size: 34rpx;
           }
           .head-title{
               font-size: $font-lg;
               font-weight: bold;
               margin: 40rpx 0 30rpx 0;
           }
       }
        .bg-icon{
            position: absolute;
            top: -220rpx;
            right: -220rpx;
            z-index: 99;
            width: 100%;
            height: 700rpx;
            opacity: .1;
            overflow: hidden;
        }
       .bg-wrap{
           width: 100%;
           border-top: 45rpx solid transparent;
           border-bottom: 150rpx solid #f5f5f5;
           border-left: 150rpx solid transparent;
           border-right: 150rpx solid transparent;
           margin-top: 40rpx;
       }

   }
</style>
